<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>因子看板详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="聚宽让量化交易的成长之路更为平坦，聚宽让做量化交易的成本极大降低">
    <meta name="keywords" content="因子看板、研究策略、本地数据、量化聚宽">
    <link rel="shortcut icon" href="../static/favicon.ico"  type="image/x-icon"/>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/public.css">
    <link rel="stylesheet" href="../static/css/details.css">
    <script src="../static/jquery-1.11.1.min.js"></script>
    <script src="../static/Highcharts-Stock-10.0.0/code/highstock.js"></script>
    <script src="../static/Highcharts-Stock-10.0.0/code/modules/exporting.js"></script>
    <script src="../static/Highcharts-Stock-10.0.0/code/modules/series-label.js"></script>
    <script src="../static/Highcharts-Stock-10.0.0/code/modules/oldie.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script src="../static/echarts/dist/echarts.min.js"></script>
    <script src="../static/echarts/echarts-gl-master/dist/echarts-gl.min.js"></script>
  </head>
<body>

<!-- 头部 -->
<div class="head">
  <span class="logo">AI因子看板</span>
  <ul class="layui-nav first">
    <li class="layui-nav-item" onclick="showmodel()">专家信息</li>
    <li class="layui-nav-item" onclick="showmodel()">园区信息</li>
    <li class="layui-nav-item"><a href="/ccrs">自助评级</a></li>
    <li class="layui-nav-item"><a href="http://ipoipo.cn/">行业研究</a></li>
    <li class="layui-nav-item"><a href="https://bigquant.com/wiki/home">量化研究</a></li>
    <li class="layui-nav-item"><a target="_blank" href="http://www.chaguwang.cn/">查股网</a></li>
    <li class="layui-nav-item"><a href="/">首页</a></li>
    <li><a href="/search" class="layui-icon" style="color: #ffffff;">&#xe615;</a></li>
  </ul>
  <ul class="sec">
    <li class="layui-nav-item two_li">
      <i class="layui-icon" style="padding: 0 0 0 20px;">&#xe671;</i>
      <dl class="layui-nav-child">
        <dd><a href="/search"><i class="layui-icon" class="">&#xe615;</i></a></dd>
        <dd><a href="/">首页</a></dd>
        <dd><a target="_blank" href="http://www.chaguwang.cn/">查股网</a></dd>
        <dd><a href="https://bigquant.com/wiki/home">量化研究</a></dd>
        <dd><a href="http://ipoipo.cn/">行业研究</a></dd>
        <dd><a href="/ccrs">自助评级</a></dd>
        <dd><a href="javascript:;" onclick="showmodel()">园区信息</a></dd>
        <dd><a href="javascript:;" onclick="showmodel()">专家信息</a></dd>
      </dl>
    </li>
  </ul>
  <div style="clear: both;"></div>
</div>
<div style="height: 70px;"></div>
<script>
    $('.two_li').click(function(){
      $('.two_li dl').toggle()
    })
</script>



<!-- 详细信息 -->
<div class="layui-container" style="width: 100%;">
  
  <div class="describe">
    <div>
      <button class="layui-btn goback" onclick="window.history.go(-1)">返回上一页</button>
      <h1>{{details}}</h1>
      <div class="info_item">
        <span>meta：</span>
        <span></span>
      </div>
      <div class="info_item">
        <span>algo：</span>
        <span></span>
      </div>
      <div class="info_item">
        <span>freq：</span>
        <span></span>
      </div>
      <div class="info_item">
        <span>vol：</span>
        <span></span>
      </div>
      <div class="info_item">
        <span>end：</span>
        <span></span>
      </div>
    </div>
  </div>
</div>
<script>
 var title =  location.href.split('/')[4];
  $.ajax({
    type:'get',
    url:'/des',
    data:{'title':title},
    success:function(data){
        // console.log(data);
      $('.describe h1').html(data['title']);
      $('.describe .info_item:eq(0) span:eq(1)').html(data['meta']);
      $('.describe .info_item:eq(1) span:eq(1)').html(data['algo']);
      $('.describe .info_item:eq(2) span:eq(1)').html(data['freq']);
      $('.describe .info_item:eq(3) span:eq(1)').html(data['vol']);
      $('.describe .info_item:eq(4) span:eq(1)').html(data['end']);
    },
    error:function (err) {
      layer.msg('出错啦')
    }
  })
</script>


<div class="layui-container" style="width: 100%;">
  <div>
    <ul class="result">
      <li>
        <span>IC均值</span><br>
        <span>0.016</span>
      </li>
      <li>
        <span>|IC|>0.02的比率</span><br>
        <span>0.794</span>
      </li>
      <li>
        <span>R值</span><br>
        <span>0.229</span>
      </li>
    </ul>
  </div>
</div>


<div class="layui-container" style="width: 100%;">
  <div class="table_factor" style="overflow: auto;">
    <table class="layui-table">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>累计收益</th>
          <th>年化收益</th>
          <th>超额年化收益</th>
          <th>基准年化收益</th>
          <th>最大回撤</th>
          <th>夏普比率</th>
          <th>换手率</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>最小分位数</td>
          <td>-16.49%</td>
          <td>-6.02%</td>
          <td>-10.60%</td>
          <td>5.12%</td>
          <td>32.35%</td>
          <td>-0.44</td>
          <td>3.18%</td>
        </tr>
        <tr>
          <td>最小分位数</td>
          <td>8.47%</td>
          <td>2.84%</td>
          <td>-2.17%</td>
          <td>5.12%</td>
          <td>33.52%</td>
          <td>-0.06</td>
          <td>1.86%</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<!-- 因子数据列表 -->
<div class="layui-container" style="width: 100%;">
  <div class="table_l">
      <div class="title">
          <span class="l">
            因子值最大的10只股票
          </span>
          <span class="r">
            <i id="test1"></i>更新
          </span>
          <div style="clear: both;"></div>
      </div>
       <table class="layui-table">
          <colgroup>
            <col width="150">
            <col width="200">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th>stockcode</th>
              <th>alpha</th>
            </tr>
          </thead>
          <tbody class="list1"></tbody>
        </table>
  </div>
  <div class="table_l">
          <div class="title">
              <span class="l">
                  因子值最小的10只股票
              </span>
              <span class="r">
                  <i id="test2"></i>更新
              </span>
              <div style="clear: both;"></div>
          </div>
        <table class="layui-table">
          <colgroup>
            <col width="150">
            <col width="200">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th>stockcode</th>
              <th>alpha</th>
            </tr>
          </thead>
          <tbody class="list2"></tbody>
        </table>
  </div>
</div>
<div class="layui-container" style="width: 100%;">
  <div class="table_l">
      <div class="title">
          <span class="l">
            因子值最大的10只股票
          </span>
          <span class="r">
            <!-- <i id="test1" style="opacity: 0;">更新</i> -->
            <input type="text" placeholder="输入" class="layui-input inp3" style="width: 120px;display: inline-block;"><button type="button" class="layui-btn layui-btn-sm btn3">提交</button>
          </span>
          <div style="clear: both;"></div>
      </div>
       <table class="layui-table">
          <colgroup>
            <col width="150">
            <col width="200">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th>stockcode</th>
              <th>alpha</th>
            </tr>
          </thead>
          <tbody class="list3"></tbody>
        </table>
  </div>
  <div class="table_l">
          <div class="title">
              <span class="l">
                  因子值最小的10只股票
              </span>
              <span class="r">
                <input type="text" placeholder="输入" class="layui-input inp4" style="width: 120px;display: inline-block;"><button type="button" class="layui-btn layui-btn-sm btn4">提交</button>
              </span>
              <div style="clear: both;"></div>
          </div>
        <table class="layui-table">
          <colgroup>
            <col width="150">
            <col width="200">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th>stockcode</th>
              <th>alpha</th>
            </tr>
          </thead>
          <tbody class="list4"></tbody>
        </table>
  </div>
</div>
<div style="clear: both;"></div>
<script>
  function datainit(value,el) {
    let _html = '';
    let time= value.split('-').join('');
    let _path = location.href.split('/')[4];
    $.ajax({
      type:'post',
      data:{"search":time,"_path":_path},
      url:'/dateSearch',
      success:function (data) {
        // console.log(data)
        for(var i = 0; i < data.length; i++){
            _html += '<tr><td>'+data[i]['stockcode']+'</td><td>'+data[i]['alpha']+'</td></tr>';
        }
        $(el).html(_html);
        _html = '';
      },
        error:function (err) {
            layer.msg('出错啦')
        }
    })
  }

  var nameHtml = '';
  function nameinit(el,el1,inp){
    let _path = location.href.split('/')[4];
    $(el).click(function(){
      var s = $.trim($(inp).val())
      if(s == ''){
        layer.msg('请输入要查询的股票名')
        return false
      }
      layer.load(1)
      $.ajax({
        type:'get',
        url:'/condition',
        data:{
          "_path":_path,
          "s":s
        },
        success:function(data){
          // console.log(data)
          for(var i = 0; i < data.length; i++){
            nameHtml += '<tr><td>'+data[i]['stockcode']+'</td><td>'+data[i]['alpha']+'</td></tr>';
          }
          $(el1).html(nameHtml)
          nameHtml = '';
          layer.closeAll('loading');
        },
        error:function(err){
          layer.msg('出错啦')
        }
      })
    })
  }

  datainit('2019-12-06','.list1');
  datainit('2019-12-19','.list2');

  nameinit('.btn3','.list3','.inp3');
  nameinit('.btn4','.list4','.inp4');


  layui.use(['util'],function(){
    var layer = layui.layer,
      util = layui.util,
      element = layui.element,
      laydate = layui.laydate;
      //日期
      laydate.render({
          elem: '#test1',
          value: new Date('2019-12-06'),
          isInitValue: true,
          done:function (value) {
          console.log(value)
              datainit(value,'.list1')
          }
      });

      laydate.render({
          elem: '#test2',
          value: new Date(),
          isInitValue: true,
          done:function (value) {
              datainit(value,'.list2')
          }
      });

      //返回顶部
      util.fixbar({
          bar1: false
          ,bar2: false
          ,css: {right: 10, bottom: 30}
          ,bgcolor: 'rgb(231, 76, 60)'
      });
  });
</script>

<!-- 三维立体图表 -->
<div class="layui-container" style="width: 100%;">
  <div class="main" id="main"></div>
</div>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    $.ajax({
      type:'get',
      url:'/echarts',
      success:function(data){
        // console.log(data)
        var symbolSize = 2.5;
        option = {
          grid3D: {},
          xAxis3D: {
            type: 'category'
          },
          yAxis3D: {},
          zAxis3D: {},
          dataset: {
            dimensions: [
              'Income',
              'Life Expectancy',
              'Population',
              'Country',
              { name: 'Year', type: 'ordinal' }
            ],
            source: data
          },
          series: [
            {
              type: 'scatter3D',
              symbolSize: symbolSize,
              encode: {
                x: 'Country',
                y: 'Life Expectancy',
                z: 'Income',
                tooltip: [0, 1, 2, 3, 4]
              }
            }
          ]
        };
        myChart.setOption(option);
      },
      error:function(err){
        console.log('wrr'+err)
        layer.msg('出错啦');
      }
    })

</script>



<dir class="layui-container" style="width: 100%;">
  <div class="item_list">
    <div class="list_li" id="list_li1"></div>
    <div class="list_li" id="list_li2"></div>
    <div class="list_li" id="list_li3"></div>
    <div class="list_li" id="list_li4"></div>
  </div>
  <div style="clear: both;"></div>
</dir>

<!-- 图表一 -->
<script>
function getData(n) {
  var arr = [],i,a,b,c,spike;
  for (i = 0; i < n; i = i + 1) {
      if (i % 100 === 0) {
          a = 2 * Math.random();
      }
      if (i % 1000 === 0) {
          b = 2 * Math.random();
      }
      if (i % 10000 === 0) {
          c = 2 * Math.random();
      }
      if (i % 50000 === 0) {
          spike = 10;
      } else {
          spike = 0;
      }
      arr.push([
          i,
          2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
      ]);
  }
  return arr;
}
var n = 100000,
    data = getData(n);
// console.time('line');
Highcharts.chart('list_li1', {
    chart: {
        zoomType: 'x'
    },
    boost: {
        useGPUTranslations: true
    },
    title: {
        text: 'Highcharts drawing ' + n + 'points'
    },
    subtitle: {
        text: 'Using the Boost module'
    },
    tooltip: {
        valueDecimals: 2
    },
    series: [{
        data: data,
        lineWidth: 0.5
    }]
});
// console.timeEnd('line');
</script>

<!-- 图表二 -->
<script type="text/javascript">
Highcharts.chart('list_li2', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: 'millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
            Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 727, 31]
    }, {
        name: 'Year 2016',
        data: [1216, 1001, 4436, 738, 40]
    }]
});
</script>

<!-- 图表三 -->
<script type="text/javascript">
  Highcharts.chart('list_li3', {
      chart: {
          type: 'scatter',
          zoomType: 'xy'
      },
      title: {
          text: 'Height Versus Weight of 507 Individuals by Gender'
      },
      subtitle: {
          text: 'Source: Heinz  2003'
      },
      xAxis: {
          title: {
              enabled: true,
              text: 'Height (cm)'
          },
          startOnTick: true,
          endOnTick: true,
          showLastLabel: true
      },
      yAxis: {
          title: {
              text: 'Weight (kg)'
          }
      },
      legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'top',
          x: 100,
          y: 70,
          floating: true,
          backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
          borderWidth: 1
      },
      plotOptions: {
          scatter: {
              marker: {
                  radius: 5,
                  states: {
                      hover: {
                          enabled: true,
                          lineColor: 'rgb(100,100,100)'
                      }
                  }
              },
              states: {
                  hover: {
                      marker: {
                          enabled: false
                      }
                  }
              },
              tooltip: {
                  headerFormat: '<b>{series.name}</b><br>',
                  pointFormat: '{point.x} cm, {point.y} kg'
              }
          }
      },
      series: [{
          name: 'Female',
          color: 'rgba(223, 83, 83, .5)',
          data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
              [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
              [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
              [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
              [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
              [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
              [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
              [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
              [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
              [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
              [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
              [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
              [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
              [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
              [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
              [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
              [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
              [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
              [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
              [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
              [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
              [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
              [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
              [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
              [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
              [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
              [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
              [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
              [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
              [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
              [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
              [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
              [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
              [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
              [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
              [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
              [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
              [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
              [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
              [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
              [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
              [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
              [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
              [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
              [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
              [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
              [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
              [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
              [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
              [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
              [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
              [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]
  
      }, {
          name: 'Male',
          color: 'rgba(119, 152, 191, .5)',
          data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
              [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
              [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
              [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
              [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
              [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
              [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
              [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
              [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
              [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
              [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
              [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
              [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
              [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
              [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
              [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
              [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
              [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
              [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
              [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
              [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
              [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
              [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
              [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
              [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
              [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
              [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
              [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
              [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
              [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
              [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
              [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
              [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
              [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
              [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
              [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
              [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
              [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
              [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
              [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
              [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
              [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
              [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
              [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
              [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
              [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
              [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
              [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
              [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
              [180.3, 83.2], [180.3, 83.2]]
      }]
  });
</script>

<!-- 图标四 -->
<script type="text/javascript">
  Highcharts.chart('list_li4', {
      chart: {
          type: 'column'
      },
      title: {
          text: 'Monthly Average Rainfall'
      },
      subtitle: {
          text: 'Source: WorldClimate.com'
      },
      xAxis: {
          categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
          crosshair: true
      },
      yAxis: {
          min: 0,
          title: {
              text: 'Rainfall (mm)'
          }
      },
      tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
              '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
      },
      plotOptions: {
          column: {
              pointPadding: 0.2,
              borderWidth: 0
          }
      },
      series: [{
          name: 'Tokyo',
          data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  
      }, {
          name: 'New York',
          data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
  
      }, {
          name: 'London',
          data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
  
      }, {
          name: 'Berlin',
          data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
  
      }]
  });
</script>


<!-- 底部 -->
<div class="footer">
  <div class="layui-container">
    <div>
      <dl class="dl">
        <dt>关于</dt>
        <dd><a href="http://www.tafirt.org/about.html" target="_blank" rel="noopener noreferrer">关于我们</a></dd>
        <dd><a href="http://www.tafirt.org/coalize.html" target="_blank" rel="noopener noreferrer">加入我们</a></dd>
        <dd><a href="http://www.tafirt.org/contact.html" target="_blank" rel="noopener noreferrer">联系我们</a></dd>
      </dl>
      <dl class="dl">
        <dt>帮助</dt>
        <dd onclick="showmodel()">常见问题</dd>
        <dd onclick="showmodel()">API文档</dd>
      </dl>
      <dl class="dl">
        <dt>友情链接</dt>
        <dd><a href="http://www.ia.cas.cn/" target="_blank" rel="noopener noreferrer">中国科学院自动化研究所</a></dd>
        <dd><a href="http://www.ia.cas.cn/jgsz/kyxt/ZNGZ/" target="_blank" rel="noopener noreferrer">智能感知与计算研究中心</a></dd>
        <dd><a href="https://www.csc108.com/comOverView/introduce.jspx" target="_blank" rel="noopener noreferrer">中信建投证券</a></dd>
      </dl>
      <dl>
        <img src="../static/images/qrcode.png" alt="">
      </dl>
    </div>
  </div>
  <div style="clear: both;"></div>
</div>
<p style="color: #000000;text-align: center;">@2022 津icp备15002249号-6</p>
<style>
  input,select{
    border: none;
  }
</style>
<!-- 弹框 -->
<div class="mask"></div>
<form class="model_f qr_login">
  <div class="model_logo">
    <img src="../static/images/logo.png" alt="">
    <span>TAFIRT</span>
  </div>
  <div class="model_title">
    验证码登录/注册
  </div>
  <div class="group">
    <select name="" id="sel" required>
      <option value="+86">+86</option>
      <option value="+86">中国+86</option>
      <option value="+86">中国香港特别行政区+852</option>
    </select>
    <input type="number" class="int iphone" required placeholder="手机号">
  </div>
  <div class="group">
    <input type="text" class="int graphical" required placeholder="获取验证码">
    <img src="" alt="">
  </div>
  <div class="group">
    <input type="text" class="int qrcode" required placeholder="验证码">
    <span>获取验证码</span>
  </div>
  <div class="group gologin">
    <button class="layui-btn layui-btn-fluid">登录</button><br/>
    <a href="javascript:;" class="" style="padding-bottom: 20px;" onclick="goreg()">密码登录 ></a>
  </div>
</form>

<form class="model_f pass_login">
  <div class="model_logo">
    <img src="../static/images/logo.png" alt="">
    <span>TAFIRT</span>
  </div>
  <div class="model_title">
    密码登录
  </div>
  <div class="group">
    <input type="number" class="int" required placeholder="手机/邮箱/用户名" style="width: 340px;">
  </div>
  <div class="group">
    <input type="password" class="int" required placeholder="密码" style="width: 340px;">
  </div>
  <div class="group">
    <input type="text" class="int qrcode" required placeholder="验证码">
    <img src="" alt="">
  </div>
  <div class="group gologin">
    <button class="layui-btn layui-btn-fluid">登录</button><br/>
    <a href="javascript:;" class="" style="padding-bottom: 20px;float: left;">忘记密码?</a>
    <a href="javascript:;" class="" style="padding-bottom: 20px;float: right;" onclick="gologin()">验证码登录/注册 ></a>
  </div>
</form>

</body>
<script>
$('.mask').click(function(){
  $('.pass_login,.qr_login').hide();
  $(this).hide();
})
function showmodel(){
  $('.qr_login,.mask').show();
}
function goreg(){
  $('.pass_login').show();
}
function gologin(){
  $('.pass_login').hide();
  $('.qr_login').show();
}
</script>
</html>